<template>
  <div class="teacherList">
    <span style="font-size: 24px; font-weight: 900; color: var(--el-color-primary)">毕设志愿</span>
    <div class="deadLine" style="margin-top: 3%">
      <span style="font-size: 16px">志愿提交截止时间：{{ formatDate(props.group?.endTime, '{y}年{m}月{d}日 {h}:{i}:{s}') }}</span>
    </div>

    <!-- 教师列表 -->
    <div class="teacher-section">
      <div class="section-header">
        <h2 class="section-title">
          {{ hasSelectedTeacher ? '指导老师' : '志愿教师列表' }}
          <span class="section-sub">({{ displayedTeachers?.length || 0 }}人)</span>
        </h2>
      </div>

      <div v-if="displayedTeachers && displayedTeachers.length > 0" class="cards-grid">
        <div v-for="(item, index) in displayedTeachers" :key="item.teacherId || index" class="card card-shadow hover-lift" :class="getCardClass(item)" @click="handleTeacherClick(item)">
          <div class="card-body">
            <img :src="resolveAvatar(item.teacher?.user?.avatar)" :alt="item.teacher?.user?.nickName || '教师头像'" class="avatar" @error="onAvatarError" />
            <div class="card-main">
              <div class="name-row">
                <h3 class="name">{{ item.teacher?.user?.nickName || '未知' }}</h3>
                <span v-if="!hasSelectedTeacher" class="badge badge-sort">志愿{{ item.sort }}</span>
                <div v-if="item.selectFlag == '1'" class="status-badge">
                  <el-icon class="status-icon"><CircleCheckFilled /></el-icon>
                  <span class="status-text">双选成功</span>
                </div>
                <div v-else-if="!hasSelectedTeacher" class="status-badge">
                  <span class="circle-icon"></span>
                  <span class="status-text">未选中</span>
                </div>
              </div>
              <p class="meta">工号：{{ item.teacher?.teachId || '未填写' }}</p>
              <p class="meta">研究领域：{{ item.teacher?.majorField || '未填写' }}</p>
              <p class="meta">学院：{{ item.teacher?.user?.dept?.deptName || '未知学院' }}</p>
              <p v-if="item.teacher?.email" class="meta">邮箱：{{ item.teacher.email }}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 空状态 -->
      <div v-else class="empty-state">
        <p>暂无志愿教师</p>
      </div>
    </div>

    <!-- 教师详情对话框 -->
    <TeacherDetailDialog ref="teacherDetailDialogRef" />
  </div>
</template>
<script setup>
import { ref, computed } from 'vue'
import { parseTime } from '@/utils/ruoyi'
import { CircleCheckFilled } from '@element-plus/icons-vue'
import defaultAvatar from '@/assets/images/profile.jpg'
import TeacherDetailDialog from '@/views/teamStudent/components/TeacherDetailDialog.vue'

const props = defineProps({
  teacher: { type: Array, default: () => [] },
  group: { type: Object, default: () => ({}) }
})

const teacherDetailDialogRef = ref(null)

// 检查是否有已选中的老师
const hasSelectedTeacher = computed(() => {
  return props.teacher?.some(t => t.selectFlag == '1') || false
})

// 如果有已选中的老师，只显示已选中的；否则显示所有志愿老师
const displayedTeachers = computed(() => {
  const list = props.teacher || []

  // 如果有 selectFlag == '1' 的教师，只显示该教师
  const selectedTeacher = list.find(t => t.selectFlag == '1')
  if (selectedTeacher) {
    return [selectedTeacher]
  }

  // 否则显示所有志愿教师
  return list
})

function formatDate(val, fmt = '{y}-{m}-{d} {h}:{i}:{s}') {
  if (!val) return '-'
  try {
    return parseTime(val, fmt)
  } catch (e) {
    try {
      const d = new Date(val)
      const pad = (n) => String(n).padStart(2, '0')
      const yyyy = d.getFullYear()
      const mm = pad(d.getMonth() + 1)
      const dd = pad(d.getDate())
      return `${yyyy}-${mm}-${dd}`
    } catch {
      return String(val)
    }
  }
}

function resolveAvatar(src) {
  if (typeof src !== 'string') return defaultAvatar
  const s = src.trim()
  if (!s || s === 'null' || s === 'undefined') return defaultAvatar
  return import.meta.env.VITE_APP_BASE_API + s
}

function onAvatarError(e) {
  if (e && e.target) {
    e.target.onerror = null
    e.target.src = defaultAvatar
  }
}

function getCardClass(item) {
  // 如果被选中，添加特殊样式
  return item.selectFlag === 1 ? 'card-selected' : ''
}

function handleTeacherClick(item) {
  // 打开教师详情对话框
  if (teacherDetailDialogRef.value && item.teacher) {
    teacherDetailDialogRef.value.openDialog(item.teacher)
  }
}
</script>
<style scoped lang="scss">
$padding: 24px;
$border-radius: 10px;
$border-bottom: 1px solid #e5e5e5;

.teacherList {
  width: 100%;
  height: 100%;
  background-color: white;
  margin: 0;
}

.deadLine {
  background-color: #f1f1f1;
  width: 100%;
  height: 10%;
  padding: $padding;
  border-radius: $border-radius;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 教师列表区域 */
.teacher-section {
  background-color: transparent;
  margin-top: 40px;
  height: 80%;
  overflow: auto;
  width: 100%;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--el-color-primary);
  margin: 0;
}

.section-sub {
  margin-left: 8px;
  font-size: 14px;
  color: #909399;
  font-weight: normal;
}

/* 卡片网格布局 - 单列 */
.cards-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 卡片样式 */
.card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  border-left: 4px solid transparent;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.card-selected {
  border-left-color: #67c23a;
  background-color: #f0f9ff;
  box-shadow: 0 8px 24px rgba(103, 194, 58, 0.2) !important;
}

/* 右上角状态标识 */
.status-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 10px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  z-index: 10;
  transition: all 0.3s ease;
}

/* 已选中状态 */
.card-selected .status-badge {
  background: linear-gradient(135deg, #67c23a 0%, #5daf34 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(103, 194, 58, 0.3);
}

/* 未选中状态 */
.card:not(.card-selected) .status-badge {
  background: #f5f7fa;
  color: #909399;
  border: 1px solid #dcdfe6;
}

.status-icon {
  font-size: 14px;
}

.circle-icon {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-radius: 50%;
  display: inline-block;
}

.status-text {
  white-space: nowrap;
  font-size: 11px;
}

.card-shadow {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.card-body {
  display: flex;
  align-items: flex-start;
}

.avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.card-main {
  margin-left: 12px;
  flex: 1;
}

.name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.name {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  color: #303133;
}

.badge {
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: normal;
}

.badge-sort {
  background-color: #ecf5ff;
  color: var(--el-color-primary);
}

.meta {
  font-size: 13px;
  color: #909399;
  margin-top: 6px;
  margin-bottom: 0;
  line-height: 1.5;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #909399;
  font-size: 14px;
}

.empty-state p {
  margin: 0;
}
</style>
